<!-- 编辑模态框 -->
<div id="editModal" class="fixed inset-0 bg-black/50 z-50 hidden flex justify-center items-center">
    <div class="card p-6 w-1/2 max-w-2xl">
        <h2 class="text-xl font-bold mb-4">编辑分类信息</h2>
        <form id="editForm" method="POST" class="space-y-4" action="UpdateCategory.php">
            <div>
                <input type="hidden" name="id" id="editId">
                <label class="block text-sm font-medium text-gray-700">分类名称</label>
                <input
                        type="text"
                        name="categoryName"
                        id="editCategoryName"
                        class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary"
                        required
                >
            </div>
            <div>
                <label class="block text-sm font-medium text-neutral-700">类别说明</label>
                <input
                        type="text"
                        name="description"
                        id="editDescription"
                        class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary"
                        required
                >
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn-primary">保存修改</button>
                <button type="button" id="closeModal" class="btn-secondary">取消</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const editButtons = document.querySelectorAll('.edit-btn');
        const modal = document.getElementById('editModal');
        const closeBtn = document.getElementById('closeModal');

        // 点击编辑按钮：填充数据并显示模态框
        editButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                // 从data属性读取图书信息
                const category = {
                    id: btn.dataset.id,
                    categoryName:btn.dataset.categoryName,
                    description:btn.dataset.description
                };

                // 填充表单
                document.getElementById('editId').value=category.id;
                document.getElementById('editCategoryName').value=category.categoryName;
                document.getElementById('editDescription').value=category.description;

                modal.classList.remove('hidden'); // 显示模态框
            });
        });

        // 关闭模态框（按钮/背景）
        closeBtn.addEventListener('click', () => modal.classList.add('hidden'));
        modal.addEventListener('click', (e) => {
            if (e.target === modal) modal.classList.add('hidden'); // 点击背景关闭
        });
    });
</script>